import React, { Component } from "react";
import "./App.css";
import { connect } from "react-redux";
import Operations from "@/components/Operations";
import { Table, Button, message, Divider, List } from "antd";
import {
    deleteItem,
    changeMode,
    changeVisable,
} from "@/store/actions/toDoList";

class App extends Component {
    constructor() {
        super();
        this.state = {
            columns: [
                {
                    title: "KEY",
                    dataIndex: "key",
                    align: "center",
                },
                {
                    title: "名称",
                    dataIndex: "item",
                },
                {
                    width: 200,
                    title: "操作",
                    align: "center",
                    render: (text, rowData) => (
                        <div className="operation-wrap">
                            <Button
                                type="primary"
                                onClick={() => this.handleUpdate(rowData)}
                            >
                                编辑
                            </Button>
                            <Button onClick={() => this.handleDelete(rowData)}>
                                删除
                            </Button>
                        </div>
                    ),
                },
            ],
            rowData: {},
        };
    }
    handleDelete = ({ key }) => {
        this.props.deleteItem({ index: key });
        message.success("删除成功");
    };
    handleUpdate = ({ item, key }) => {
        this.props.changeMode({ mode: "update" });
        this.props.changeVisable({ visable: true });
        this.setState({
            rowData: { item, index: key },
        });
    };
    render() {
        const { columns, rowData } = this.state;
        const { toDoList } = this.props;
        return (
            <div className="App">
                <Divider orientation="left">Redux-toDoList-state</Divider>
                <List
                    dataSource={toDoList}
                    renderItem={(item) => (
                        <List.Item>{JSON.stringify(item)}</List.Item>
                    )}
                />
                <div className="toDoList">
                    <Operations rowData={rowData} />
                    <Table
                        bordered
                        columns={columns}
                        pagination={false}
                        dataSource={toDoList.map((item, key) => ({
                            ...item,
                            key,
                        }))}
                    ></Table>
                </div>
            </div>
        );
    }
}
const mapStateToProps = (state) => {
    return state.toDoList;
};
const mapDispatchToProps = (dispatch) => {
    return {
        deleteItem: ({ index }) => dispatch(deleteItem({ index })),
        changeMode: ({ mode }) => dispatch(changeMode({ mode })),
        changeVisable: ({ visable }) => dispatch(changeVisable({ visable })),
    };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
